<template>
	<div class="login pos-r text-c">
		<img :src="loginUrl.background" class="background"/>
		<div class="login-con middle pl-20 pr-20">
			<img :src="loginUrl.logo" class="logo pt-20" height="100" width="100"/>
			<!--...................注册登录开始页面........................-->
			<el-col class="login-box pt-20 pb-20">
				<el-row>
					<transition name="el-fade-in" mode="out-in">
						<el-button type="text" v-if="warn" v-html="msg" class="waring" @click="register"></el-button>
					</transition>
				</el-row>
				<el-row>
					<el-button type="text" v-if="success" v-html="phoneEmailsuc" class="success"></el-button>
				</el-row>
				<el-row>
					<el-button type="text" v-if="registersuccess" v-html="registersuc" class="success"></el-button>
				</el-row>
				<el-row>
					<el-autocomplete placeholder="手机号或邮箱" v-model.trim="login_name" :fetch-suggestions="querySearch" class="w-100 login-input" :class="{border:borderOne}">
					</el-autocomplete>
				</el-row>
				<el-row>
					<el-input type="password" placeholder="密码" v-model.trim="password" class="login-input pt-20" :class="{border:borderTwo}">
					</el-input>
				</el-row>
				<el-row>
					<el-col class="clearfix pt-20">
						<el-checkbox v-model="remember" class="float-l login-checkbox">记住我的登录信息</el-checkbox>
						<router-link to="login_errorPage/forgetMess" class="float-r cursor color-b">忘记密码？</router-link>
					</el-col>
				</el-row>
				<el-row class="mt-20">
					<el-button class="w-100 login-button" @click="login">
						登 录
					</el-button>
				</el-row>
				<!--<el-row>
					<div class="fastLanding">
						<i class="line"></i>
						<span>快捷登录</span>
					</div>
					<router-link to="login_errorPage/weixin" class="weixin display-in"><i class="iconfont icon-weixintubiao"></i></router-link>
				</el-row>-->
				<!--<el-row class="pt-20">
					<div class="f12 color-6">没有账户？
						<router-link :to="{name:'register'}" class="color-b f12 padding-n">去注册？</router-link>
					</div>
				</el-row>-->
			</el-col>
		</div>
	</div>
</template>

<script>
	import { accountInfo } from "@/api/login"
	import {getUserMess} from "@/api/myStore"	
	import router from '@/router'
	import * as types from "@/store/mutation-types"
	export default {
		name: 'login',
		data() {
			return {
				emailPhone: "",
				borderOne: false,
				borderTwo: false,
				accountSuggest: [
					' ',
					'qq.com',
					'sina.com',
					'163.com',
					'126.com',
					'gmail.com',
					'53kf.com'
				],
				warn: false,
				errmsg: {
					401: "请输入你的手机号或邮箱",
					402: "请输入你的密码",
				},
				msg: "",
				remember: false,
				login_name: "",
				password: "",
				passwordWarning: false,
				login_name_warning: false,
				accountWarning: false,
				PasswordWaring: false,
				phoneEmailsuc: "重置密码成功！请登录",
				registersuc: "注册成功！请登录"
			}
		},
		created: function() {
			this.$store.dispatch("doLoginURL");
		},
		computed: {
			loginUrl() {
				return this.$store.getters.getLoginUrl;
			},
			success() {
				return this.$store.getters.getResetSuccess;
			},
			registersuccess() {
				return this.$store.getters.getRegisterSuccess;
			}
		},
		methods: {
			//输入邮箱时的提示框
			querySearch: function(queryString, cb) {				
				var queryString = queryString && queryString.trim();
				var result = [];
				var index = queryString.indexOf("@");				
				if(!queryString) {
					return cb(result); //没有内容时删除默认信息
				}
				if(index !== -1) {
					var prefix = queryString.slice(0, index);
					var suffix = queryString.slice(index + 1);
					result = this.accountSuggest.filter((item) => {
							return item.indexOf(suffix) !== -1;
						})
						.map((item) => {
							return {
								value: prefix + '@' + item
							}
						})
				} else {				
					result = this.accountSuggest.map((item) => {
							return item.indexOf(" ")!==-1? {value:queryString + item} : {value:queryString + '@' + item}
					});
				}
				cb(result)
			},
			register: function(event) {
				//错误信息里显示出的注册或者是忘记密码
				if(event.srcElement.nodeName == "SPAN") {
					if(event.srcElement.innerText === ' "注册"') {
						router.push("/login_errorPage/register")
					}
					if(event.srcElement.innerText === ' "忘记密码" ') {
						router.push("/login_errorPage/forgetMess")
					}
				}
			},
			login: function() {
				this.$store.dispatch("doRegisterSuccess", false);
				this.$store.dispatch("doResetSuccess", false);
				this.borderOne = false;
				this.borderTwo = false;
				this.msg = "";
				switch(true) {
					//点击登陆用户账号和密码为空时弹出的信息
					case this.login_name == "":
						this.warn = true;
						this.msg = this.errmsg[401];
						this.borderOne = true;
						break;
					case this.password == "":
						this.warn = true;
						this.msg = this.errmsg[402];
						this.borderTwo = true;
						break;
					case this.login_name !== "" && this.password !== "":
						accountInfo(this.login_name, this.password, Number(this.remember))
							//与后台交成功时的操作
							.then(({data}) => {							
								this.doLogin(data);								
							})
							.catch(({response: {data}}) => {							
								//与后台交互时出现的错误信息
								this.warn = true;
								this.msg = data.errorcmt;
								var key = data.errcode;
								//input边框颜色
								switch(true) {
									case key == 40011 || key == 40009:
										this.borderTwo = true;
										break;
									case key == 40010:
										this.borderOne = true
										break;
									case key == 40009:
										this.borderOne = true
										this.borderTwo = true;
										break;
								}
								//多次输入账号或密码错误提示
								if(key === 40010) {
									let num = this.accountWarning++;
									if(num >= 3) {
										this.msg = '账户不存在请先' + '<span  class="cursor color-b register">' + ' "注册"' + '</span>'
									}
								} else if(key === 40011) {
									let num = this.PasswordWaring++;
									if(num >= 2) {
										this.msg = '密码错误，您可以通过' + '<span class="cursor color-b">' + ' "忘记密码" ' + '</span>' + '找回'
									}
								};

							})
						break;
				}
			},
			doLogin: function(datas) {
				//登陆成功时执行的函数
				this.$store.dispatch("doLogin", datas);
				let id = datas.mall_id;
				//保证店铺装修的信息不依赖店铺信息，这里直接获取一次信息,并且保证shop_id在登录成功时就被保存
				getUserMess(id)
				.then(({data}) => {									
					//没有数据时长度为0
					var len = data.length;
					this.$store.commit(types.MESSLENGTH, len);
					if(len > 0) {
						var shop_id = data[0].shop_id;
						this.$store.commit(types.GETSHOPID, shop_id);
					};
				})
				.catch(({response: {data}})=>{
					this.$message.error(data.errorcmt);
				})	
			},
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	.login {
		width: 100%;
		max-width: 1920px;
		margin: 0 auto;
		.background{
			position: fixed;
		    height: 100%;
		    width: 100%;
		    left: 0;
		    top: 0;
		}
		.middle {
			position: absolute;
			top: 128px;
			left: 50%;
			margin-left: -160px;
		}
		.login-con {
			background-color: #fff;
			width: 280px;
			border-radius: 6px;
			box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, .3);
			.login-box {
				.waring.el-button {
					&:visited {
						color: #333;
						border-color: #FF5B00;
					}
					&:hover {
						color: #333;
						border-color: #FF5B00;
					}
					&:active {
						color: #333;
						border-color: #FF5B00;
					}
					&:focus {
						color: #333;
						border-color: #FF5B00;
					}
				}
				.success.el-button {
					&:visited {
						color: #333;
						border-color: #FF5B00;
					}
					&:hover {
						color: #333;
						border-color: #FF5B00;
					}
					&:active {
						color: #333;
						border-color: #FF5B00;
					}
					&:focus {
						color: #333;
						border-color: #FF5B00;
					}
				}
				.border {
					.el-input__inner {
						border: 1px solid #FF5B00;
					}
				}
				.fastLanding {
					width: 100%;
					position: relative;
					margin-top: 20px;
					.line {
						position: absolute;
						top: 50%;
						left: 0;
						height: 1px;
						width: 100%;
						background-color: #D6D6D6;
					}
					span {
						display: inline-block;
						color: #7F7F7F;
						font-size: 12px;
						background-color: #fff;
						width: 70px;
						position: relative;
					}
				}
				.weixin {
					margin-top: 20px;
					position: relative;
					height: 36px;
					width: 36px;
					border-radius: 50%;
					background-color: #D6D6D6;
					border: none;
					cursor: pointer;
					transition: all .3s;
					&:hover {
						background-color: #00BB2A;
					}
					&:active {
						background-color: #00A123;
					}
					i {
						width: 24px;
						height: 20px;
						position: absolute;
						top: 50%;
						left: 50%;
						color: #fff;
						margin-left: -12px;
						margin-top: -8px;
					}
				}
			}
		}
	}
</style>